import {RightOutlined, UserOutlined} from "@ant-design/icons";
import Wrapper from "./style.ts";
import task from "@/static/imgs/courseContentNav/任务进程.svg";
import bell from "@/static/imgs/courseContentNav/3.1铃铛.svg";
import card from "@/static/imgs/courseContentNav/卡片 (1).svg";
import spike from "@/static/imgs/courseContentNav/回形针 (1).svg";
import setting from "@/static/imgs/courseContentNav/设置 (1).svg";
import quit from "@/static/imgs/courseContentNav/退出 (1).svg";
import logo from "@/static/imgs/courseContentNav/logo_blue.png";
import {Avatar} from "antd";
import {CSSProperties, useState} from "react";
import {useNavigate} from "react-router-dom";
import {useParams} from "react-router";


const TeacherHomeworkDetail = () => {
    const {courseId} = useParams()

    const navigate = useNavigate()

    // 头像
    const avatarItemStyle: CSSProperties = {
        display: 'flex',
        alignItems: 'center',
        fontSize: '12px',
        cursor: 'pointer',
        lineHeight: '40px',
        textAlign: 'left',
        paddingLeft: '12px',
        paddingRight: '20px',
        margin: '0 -12px',
    }
    const avatarItemImgStyle: CSSProperties = {
        width: '26px',
        height: '26px',
        marginRight: '8px',
    }
    const AvatarItem = (props: any) => {
        const {title, img} = props
        return (
            <div className='avatar-item' style={avatarItemStyle} onClick={() => {
                title === '退出' && navigate('/')
            }}>
                <img style={avatarItemImgStyle} src={img} alt=""/>
                <div>{title}</div>
            </div>
        )
    }
    const avatarItems = [
        {
            title: '卡片',
            img: card
        },
        {
            title: '回形针',
            img: spike
        },
        {
            title: '设置',
            img: setting
        },
        {
            title: '退出',
            img: quit
        },
    ]

    const [dropDownVisible, setDropDownVisible] = useState(false);


    return (
        <Wrapper>
            <div className="container flex">
                <div className="left flex">
                    <div className="logo">
                        <img src={logo} alt=""/>
                    </div>
                    <div className="nav flex">
                        <div className="first" onClick={() => {
                            navigate('/teacherMyClassroom')
                        }}>我的课堂
                        </div>
                        <div className="right-outline">
                            <RightOutlined style={{color: '#c0c4cc', width: '14px', height: '14px'}}/>
                        </div>
                        <div className="second" onClick={() => {
                            navigate('/teacherCourseContent/' + courseId)
                        }}>课程内容
                        </div>
                        <div className="right-outline">
                            <RightOutlined style={{color: '#c0c4cc', width: '14px', height: '14px'}}/>
                        </div>
                        <div>作业详情</div>
                    </div>
                </div>
                <div className="right flex">
                    <div className="task flex">
                        <img src={task} alt=""/>
                        <div>任务管理</div>
                    </div>
                    <div className="bell">
                        <img src={bell} alt=""/>
                    </div>
                    <div className="avatar" onClick={() => setDropDownVisible(!dropDownVisible)}>
                        <Avatar size="large" icon={<UserOutlined/>}/>
                        <div className="menu" style={{display: dropDownVisible ? 'block' : 'none'}}>
                            {avatarItems.map((item, index) => {
                                return (
                                    <AvatarItem key={index} title={item.title} img={item.img}/>
                                )
                            })}
                        </div>
                    </div>
                </div>
            </div>
        </Wrapper>
    );
}
export default TeacherHomeworkDetail;